<template>
 <div>
   <el-card shadow="always">
              <el-row>
                  <!--聊天内容窗口-->
                <el-col >
                  与{{sendUser.userName}}聊天中
                <div
                    id="dataShow"
                    onmouseover="this.style.overflow='overlay'"
                    onmouseout="this.style.overflow='hidden'"
                    class="dataShow"
                  >
                    <div
                      v-for="(item,index) in chats"
                      :key="index"
                      style="padding:14px;">
                      <!--己方消息-->
                      <div v-if="sendAccount===item.sendAccount">
                        <el-row>
                          <el-col :span="20" :offset="3">
                            <span class="aa">
                              {{ item.content }}
                            </span>
                          </el-col>
                          <el-col :span="1">
                            <span>                                 
                                <el-avatar shape="square" :size="50" :fit="fit" :src="item.sendAvatar"></el-avatar>   <!--对应头像-->
                            </span>
                          </el-col>
                        </el-row>
                      </div>
                      <!--对方消息-->
                      <div v-if="targetAccount===item.sendAccount">
                        <el-row>
                          <el-col :span="1">
                            <span>       
                                <el-avatar shape="square" :size="50" :fit="fit" :src="item.sendAvatar"></el-avatar>
                            </span>
                          </el-col>
                          <el-col :span="20">
                            <span class="bb">
                              {{ item.content }}
                            </span>
                          </el-col>
                        </el-row>
                      </div>
                      <br>
                      
                    </div>
                </div>
                <!--消息输入框-->
                <div style="margin: -2px 15px;">
                    <div >
                        <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="" v-model="sendParams.content"
                            resize="none" autofocus maxlength="500">
                        </el-input>
                    </div>
                    <div class="sendButton" style="float:right">
                        <el-button size="mini" @click="sendChat()">发送</el-button>
                    </div>
                </div>
                </el-col>
              </el-row>
   </el-card>
  </div>
</template>
<script>
import { getChatList ,sendChat} from '@/api/chat'
import { getUser} from '@/api/user'
export default {
  data() {
    return {
      visible: false,
      chats:[],
      chatParams:{
        targetAccount:this.$route.query.userAccount,
      },
      targetAccount:this.$route.query.userAccount,//即要聊天的目标用户
      sendAccount:this.$store.state.user.userAccount,//即当前登录用户
      sendParams:{
        targetAccount:this.$route.query.userAccount,
        content:''
      },
      userParams:{
        studentAccount:this.$route.query.userAccount
      },
      sendUser:{}
    };
  },
  created() {
    
    this.getChatList()
    this.getUser()
  },
  methods: {
      async getChatList() {
      let res = await getChatList(this.chatParams);
      this.chats = res.beans;
    },
    async getUser() {
      let res = await getUser(this.userParams);
      this.sendUser = res.bean;
    },
    async sendChat() {
      let res = await sendChat(this.sendParams).then(()=>{
            this.$message({
              type: 'success',
              message: '发送消息成功!'
            })
            this.getChatList()
            this.sendParams.content=''
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '发送消息失败!'
            })
            })
    },
  }
};
</script>

<style>
  .font{
    font-size: 10px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
  }
  .dataShow{
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: -24px;
    margin-top: -24px;
    height:400px;
    margin-bottom: 5%;
    margin-top: 5%;
    background-color: #f5f5f5;
  }
  .aa{
    float: right;
    position: relative;
    display: inline-block;
    max-width: calc(40%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 10px;
    padding: 6px 10px;
    text-align: left;
    word-break: break-all;
    background-color: #9eea6a;
    color: #000;
    border-radius: 4px;
    box-shadow: 0px 1px 7px -5px #000;
    border:0px solid #000;
    margin-top: 0;
    margin-right: 10px;
  }
  .aa:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #9eea6a;
    border-right: solid 10px #00800000;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    left: 100%;
  }
  .bb{
    display: inline-block;
    line-height:30px;
    font-style: normal;
    background-color: white;
    letter-spacing: 2px;
    position: relative;
    max-width: calc(40%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 10px;
    padding: 6px 10px;
    text-align: left;
    word-break: break-all;
    border-radius: 4px;
    color: #000;
    box-shadow: 0px 1px 7px -5px #000;
    border:0px solid #000;
    margin-top: 0;
    margin-left: 25px;
  }
  .bb:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #00800000;
    border-right: solid 10px white;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    right: 100%;
 
  }
</style>
